<html>
<head>
<title>Groupon Daily Coupon</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var time_diff = 0;
var time_left_int = 0;
var g_json = null;
var deal_url = 'http://www.kqzyfj.com/click-4029351-10769830?url=';

$(document).ready(function() {
        chrome.browserAction.setBadgeText({text:''});   
        if (localStorage['city_xml'] == null) {
                $('#content').html('<p style="padding:20px;">You have not specified your city yet. <a href="options.html" target="_blank" style="color:#0981BE; font-weight:bold; text-decoration:none;">Click here</a> to choose your city.</p>');
        } else {
                parseData(chrome.extension.getBackgroundPage().getJSON(), 0);
        }
});

function parseData(json, deal_index) {
        if (json == null) {
                $('#content').html('<p style="padding:20px;">Could not retrieve Groupon data. Please make sure you are connected to the internets...</p>');
                return;
        }
        $('#content').hide();
        g_json = json;
        clearInterval(time_left_int);
        var end_date = json.deals[deal_index].end_date;
        var yyyy = end_date.substring(0, 4);
        var mo = parseInt(end_date.substring(5, 7), 10) - 1;
        var dd = end_date.substring(8, 10);
        var hh = end_date.substring(11, 13);
        var mi = end_date.substring(14, 16);
        var ss = end_date.substring(17, 19);
        console.log(end_date.substring(5, 7));
        console.log(yyyy + "," + mo + "," + dd + "," + hh + "" + mi + "" + ss);
        var end_date_obj = new Date(Date.UTC(yyyy, mo, dd, hh, mi, ss));
        var cur_date_obj = new Date();
        time_diff = Math.floor((end_date_obj.getTime() - cur_date_obj.getTime()) / 1000);
        setRemainingTime(time_diff);
        /* update time last checked */
        localStorage['last_checked'] = cur_date_obj.getTime();
        
        var price = json.deals[deal_index].price.substring(0,json.deals[deal_index].price.length - 6);
        var full_price = json.deals[deal_index].value.substring(0,json.deals[deal_index].value.length - 6);

        $('#image').attr('src',json.deals[deal_index].large_image_url);
        $('#deal_link').html('<a href="' + deal_url + escape(json.deals[deal_index].deal_url)+'" target="_blank">Today\'s Deal:</a> ');
        $('#title_text').text(json.deals[deal_index].title);
        $('#price_value').text('$' + full_price);
        $('#discount_percent').text(json.deals[deal_index].discount_percent + '%');
        $('#discount_value').text('$'+price);
        $('#buy_button').parents().attr('href',deal_url + escape(json.deals[deal_index].deal_url));
        $('#location_name').text(localStorage['city_name']).mouseover(function() {
                        $(this).next().text('[edit]');
                }).mouseout(function() {
                        $(this).next().text('');
                }).click(function() {
                        chrome.browserAction.create
                });
        if (deal_index < (json.deals.length - 1) && deal_index == 0) {
                //next button
                $('#deal_count').html('<span class="disabled"><img src="images/prev.png" /></span> deal '+(deal_index+1)+' of ' +json.deals.length+' <a href="#" onclick="javascript:parseData(g_json, '+(deal_index+1)+');"><img src="images/next.png" /></a>');
        } else if (0 < deal_index && deal_index < (json.deals.length - 1)) {
                //next and prev button
                $('#deal_count').html('<a href="#" onclick="javascript:parseData(g_json, '+(deal_index-1)+');"><img src="images/prev.png" /></a> deal '+
                                                                                                                                                                                                                                                                                                                         (deal_index+1)+' of ' +json.deals.length+
                                                                                                                                                                                                                                                                                                                         ' <a href="#" onclick="javascript:parseData(g_json, '+(deal_index+1)+');"><img src="images/next.png" /></a>');
        } else if (deal_index == (json.deals.length - 1) && deal_index != 0) {
                //prev button
                $('#deal_count').html('<a href="#" onclick="javascript:parseData(g_json, '+(deal_index-1)+');"><img src="images/prev.png" /></a> deal '+(deal_index+1)+' of ' +json.deals.length+' <span class="disabled"><img src="images/next.png" /></span>');
        } else {
                $('#deal_count').html('');
        }
        $('#content').fadeIn();

        time_left_int = setInterval(function() { time_diff -=1; setRemainingTime(time_diff) }, 1000);
}

function setRemainingTime(seconds) {
        if (seconds < 0) {
                seconds = 0;
        }
        var days = Math.floor(seconds/86400);
        var hours = Math.floor((seconds%86400)/3600);
        var minutes = Math.floor((seconds % 3600)/60);
        var seconds = seconds % 60;
        if (days > 0) {
                $('#dynamic').text(days+'d '+pad(hours)+'h '+pad(minutes)+'m ' + pad(seconds) + 's');
        } else {
                $('#dynamic').text(hours+'h '+pad(minutes)+'m ' + pad(seconds) + 's');
        }
}

function pad(i) {
        if (i < 10) {
                return '0'+i;
        }
        return i;
}
</script>
<style type="text/css">
.disabled {
        visibility:hidden;
}

body {
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        width:470px;
        color:#000;
        background:#89B556 url(images/bg.png) no-repeat center center;
}
#deal_link a, #deal_count a {
        color: #0981BE;
        text-decoration:none;
}
#banner {
        height:84px;
        width:420px;
        background:#fff url(images/header.png) no-repeat top left;
        color:white;
        margin-top:5px;
        clear:both;
        font-size:30px;
        font-weight:bold;
        padding:7px 10px 0px 10px;
}
#image {
        width:303px;
        float:left;
        margin:3px;
        margin-left:0;
        padding:0;
}
#price {
        margin-top:3px;
        border: 1px solid #7ACCF6;
        border-bottom:none;
        width:132px;
        height:185px;
        float:left;
        background-color:#CFEEF6;
        font-size:24px;
        font-weight:bold;
        color:#000;
        text-align:center;
}
#title {
        font-size:24px;
        color:#333;
        font-weight:bold;
}
.heading {
        font-size:14px;
}
#content {
        margin:0px auto 0px auto;
        background-color:#fff;
        width:440px;
        padding:8px 8px 0px 8px;
}
.meta_data {
        margin:12px;
}
#location_name {
        cursor:pointer;
        text-decoration:none;
        color:white;
}
#gray_border {
        background-color:#555;
        width:456px;
        padding:5px;
        margin-top:15px;
        -webkit-border-radius: 5px;
}
#location {
        margin-left:200px;
        font-size:30px;
        color:white;
        font-weight:bold;
        padding-bottom:20px;
        padding-top:8px;
}
#groupon_logo {
        width:200px;
        height:87px;
        position:absolute;
        top:8px;
        left:2px;
        z-index:10;
}
#buy_button {
        float:right;
        cursor:pointer;
}
#time_left_text {
        font-size:20px;
        padding-top:4px;
}

#edit_icon {
        vertical-align:top;
        padding-left:3px;
        font-size:10px;
        font-weight:normal;
}

#deal_count {
        text-align:center;
        padding-bottom:12px;
}

#deal_count img {
        vertical-align:bottom;
}
</style>
</head>
<body>
<div id="gray_border">
  <div id="location"> <a href="options.html" target="_blank" id="location_name"></a><span id="edit_icon"></span> </div>
  <div id="groupon_logo"> <a href="http://www.jdoqocy.com/click-4029351-10769830" target="_blank"> <img src="images/logo.png" border="0" width="200" height="87" /> </a> </div>
  <div id="content">
    <div id="title"><span id="deal_link"></span><span id="title_text"></span></div>
    <img id="image" width="303" height="183" />
    <div id="price">
      <div class="meta_data"> <span class="heading">Value</span><br />
        <span id="price_value"></span> </div>
      <div class="meta_data"> <span class="heading">Discount</span><br />
        <span id="discount_percent"></span> </div>
      <div class="meta_data"> <span class="heading">You Pay</span><br />
        <span id="discount_value"></span> </div>
    </div>
    <div id="meta"></div>
    <div id="banner"> <a href="" target="_blank"><img src="images/buy.png" width="144" height="67" id="buy_button" /></a>
      <div id="time_left_text">Time Left to Buy</div>
      <span id="dynamic"></span> </div>
      <div id="deal_count"></div>
          <img src="http://www.ftjcfx.com/image-4029351-10769830" width="1" height="1" border="0"/>
  </div>
</div>
</body>
</html>